<template>
  <div class="gradient-tooltip-group" @mouseenter="show = true" @mouseleave="show = false">
    <button class="gradient-tooltip-btn">
      <div class="gradient-bg"></div>
      <span class="btn-content">
        <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" class="icon">
          <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
        </svg>
        悬停查看信息
      </span>
    </button>
    <div
      class="gradient-tooltip-content"
      :class="{ show: show }"
    >
      <div class="tooltip-card">
        <div class="tooltip-header">
          <div class="tooltip-icon-bg">
            <svg viewBox="0 0 20 20" fill="currentColor" class="icon2">
              <path clip-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" fill-rule="evenodd"></path>
            </svg>
          </div>
          <h3 class="tooltip-title">重要信息</h3>
        </div>
        <div class="tooltip-body">
          <p class="tooltip-text">这是一个带有详细信息和自定义样式的气泡提示。</p>
          <div class="tooltip-premium">
            <svg viewBox="0 0 20 20" fill="currentColor" class="icon2">
              <path clip-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fill-rule="evenodd"></path>
            </svg>
            <span>高级功能</span>
          </div>
        </div>
        <div class="tooltip-bg-blur"></div>
        <div class="tooltip-arrow"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const show = ref(false);
</script>

<style scoped>
.gradient-tooltip-group {
  position: relative;
  display: inline-block;
}
.gradient-tooltip-btn {
  position: relative;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: rgba(99,102,241,0.9);
  border-radius: 16px;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s;
  z-index: 1;
}
.gradient-tooltip-btn:hover {
  background: rgba(67,56,202,0.9);
}
.gradient-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(168,85,247,0.2),rgba(236,72,153,0.2));
  filter: blur(16px);
  opacity: 0.75;
  z-index: 0;
  transition: opacity 0.3s;
}
.btn-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
}
.icon {
  width: 18px;
  height: 18px;
}
.gradient-tooltip-content {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%) translateY(8px);
  margin-bottom: 12px;
  width: 320px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s;
  z-index: 10;
}
.gradient-tooltip-content.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.tooltip-card {
  position: relative;
  padding: 20px 20px 16px 20px;
  background: linear-gradient(135deg,rgba(23,23,36,0.95),rgba(31,41,55,0.95));
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 30px rgba(79,70,229,0.15);
  overflow: hidden;
}
.tooltip-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.tooltip-icon-bg {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(99,102,241,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon2 {
  width: 18px;
  height: 18px;
  color: #818cf8;
}
.tooltip-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.tooltip-body {
  margin-bottom: 6px;
}
.tooltip-text {
  font-size: 14px;
  color: #d1d5db;
  margin-bottom: 6px;
}
.tooltip-premium {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #a1a1aa;
}
.tooltip-bg-blur {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(90deg,rgba(99,102,241,0.1),rgba(168,85,247,0.1));
  filter: blur(12px);
  opacity: 0.5;
  z-index: 0;
}
.tooltip-arrow {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%) rotate(45deg);
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg,rgba(23,23,36,0.95),rgba(31,41,55,0.95));
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  z-index: 2;
}
.dark .tooltip-card {
  background: linear-gradient(135deg,#23232a 95%,#18181c 100%);
  border: 1px solid rgba(255,255,255,0.08);
}
.dark .tooltip-title {
  color: #fff;
}
.dark .tooltip-text {
  color: #bbb;
}
.dark .tooltip-premium {
  color: #888;
}
.dark .tooltip-content {
  background: #23232a;
  color: #fff;
}
</style> 